<template>
    <div class="warp">
        <div class="title">{{this.detail.deptName}}</div>
        <div class="desc">
            {{this.detail.address}}
        </div>
        <div class="alarm-item">
            <ul>
                <!--<li>-->
                    <!--<i class="icon iconfont icon-team"></i>-->
                    <!--<span class="alarm-name">常驻人口</span>-->
                    <!--<span class="line"></span>-->
                    <!--<span class="alarm-num">{{ this.detail.permanentPeopleCount }}</span>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<i class="icon iconfont icon-people"></i>-->
                    <!--<span class="alarm-name">外来租户</span>-->
                    <!--<span class="line"></span>-->
                    <!--<span class="alarm-num">{{ this.detail.temporaryPeopleCount }}</span>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<i class="icon iconfont icon-car"></i>-->
                    <!--<span class="alarm-name">机动车</span>-->
                    <!--<span class="line"></span>-->
                    <!--<span class="alarm-num">{{ this.detail.registerCarCount }}</span>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<i class="icon iconfont icon-bicycle"></i>-->
                    <!--<span class="alarm-name">非机动车</span>-->
                    <!--<span class="line"></span>-->
                    <!--<span class="alarm-num">{{ this.detail.registerBikeCount }}</span>-->
                <!--</li>-->
                <li>
                    <i class="icon iconfont icon-speed-dash"></i>
                    <span class="alarm-name">停车地磁</span>
                    <span class="line"></span>
                    <span class="alarm-num">{{ detail.geoMntCount }}</span>
                </li>
                <li>
                    <i class="icon iconfont icon-mailbox"></i>
                    <span class="alarm-name">消防水压</span>
                    <span class="line"></span>
                    <span class="alarm-num">{{ detail.firePressureCount }}</span>
                </li>
                <li>
                    <i class="icon iconfont icon-smog"></i>
                    <span class="alarm-name">井盖</span>
                    <span class="line"></span>
                    <span class="alarm-num">{{ detail.wellCoverCount }}</span>
                </li>
                <li>
                    <i class="icon iconfont icon-fire"></i>
                    <span class="alarm-name">智能烟感</span>
                    <span class="line"></span>
                    <span class="alarm-num">{{ detail.smokeSensorCount }}</span>
                </li>
                <li>
                    <i class="icon iconfont icon-lightning"></i>
                    <span class="alarm-name">充电桩</span>
                    <span class="line"></span>
                    <span class="alarm-num">{{ detail.chargerAmounts }}</span>
                </li>
                <li>
                    <i class="icon iconfont icon-delete"></i>
                    <span class="alarm-name">智能垃圾桶</span>
                    <span class="line"></span>
                    <span class="alarm-num">{{ detail.dustbinCount }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import fontIcon from '../../assets/styles/iconfont.css'
export default {
  name: 'alarmDetail',
  components: {
    fontIcon
  },
  props: ['summary'],
  data () {
    return {
      detail: {}
    }
  },
  watch: {
    summary (val) {
      this.detail = val
    }
  }
}
</script>

<style lang="less" scoped>
.skin-white{
    .title{
        color: #4C6072!important;
    }
    .alarm-name{
        color: #4C6072!important;
    }
    .line{
        background-color:#4C6072!important
    }
}
.warp{
    padding: 25px 0 0 30px;
    color: #fff;
}
.title{
    font-size: 22px;
}
.desc{
    margin-top:10px;
    color: #9FACC3;
    font-size: 16px;
    font-weight: 600;
}
.alarm-item{
    margin-top:26px;
    ul li{
        line-height: 10px;
        padding-bottom:24px;
    }
    i{
        color: #50E3C2;
    }
    .alarm-name{
        margin-left:10px;
        display: inline-block;
        width: 70px;
    }
    .line{
        vertical-align: middle;
        display: inline-block;
        width: 90px;
        height: 1px;
        background-color:#fff;
        opacity: 0.1;
    }
    .alarm-num{
        margin-right: 22px;
        float: right;
        color: #50E3C2;
        font-size: 14px;
    }
}
</style>
